<template>
	<view class="register-container">
		<!-- 品牌标识 -->
		<view class="brand-wrapper">
			<image class="logo" src="/static/yueka.png" mode="aspectFit" />
			<text class="slogan">悦咖音乐工作室</text>
		</view>

		<!-- 注册表单 -->
		<view class="form-wrapper">
			<!-- 手机号输入 -->
			<view class="input-wrapper">
				<image class="icon" src="/static/icon/icon-phone-orange.png" />
				<input v-model="formData.mobile" class="input-field" type="number" placeholder=" " maxlength="11"
					@focus="handleFocus(0)" @blur="validateMobile" />
				<label class="floating-label">手机号</label>
				<view class="underline" :class="{active: activeIndex === 0}"></view>
				<text class="error-tip" v-if="errors.mobile">{{ errors.mobile }}</text>
			</view>

			<!-- 密码输入 -->
			<view class="input-wrapper">
				<image class="icon" src="/static/icon/icon-lock-orange.png" />
				<input v-model="formData.password" class="input-field" password placeholder=" " @focus="handleFocus(1)"
					@blur="validatePassword" />
				<label class="floating-label">密码</label>
				<view class="underline" :class="{active: activeIndex === 1}"></view>
				<text class="error-tip" v-if="errors.password">{{ errors.password }}</text>
			</view>

			<!-- 确认密码 -->
			<view class="input-wrapper">
				<image class="icon" src="/static/icon/icon-lock-orange.png" />
				<input v-model="formData.confirmPassword" class="input-field" password placeholder=" "
					@focus="handleFocus(2)" @blur="validateConfirmPassword" />
				<label class="floating-label">确认密码</label>
				<view class="underline" :class="{active: activeIndex === 2}"></view>
				<text class="error-tip" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
			</view>

			<!-- 协议条款 -->
			<view class="agreement-wrapper">
				<label class="agreement-label">
					<checkbox-group @change="toggleAgreement">
						<label>
							<checkbox value="ty" :checked="formData.agreed" color="#ed8202" />
							<text>我已阅读并同意</text>
						</label>
					</checkbox-group>

				</label>
				<text class="agreement-link" @click="showAgreement">《用户协议及隐私政策》</text>
				<text class="error-tip" v-if="errors.agreement">{{ errors.agreement }}</text>
			</view>

			<!-- 注册按钮 -->
			<button class="submit-btn" :disabled="!formValid" @click="handleSubmit">
				立即注册
			</button>

			<!-- 登录引导 -->
			<view class="login-guide">
				<text>已有账号？</text>
				<text class="login-link" @click="navigateToLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// 响应式数据
	const formData = ref({
		mobile: '',
		password: '',
		confirmPassword: '',
		agreed: false
	});

	const errors = ref({
		mobile: '',
		password: '',
		confirmPassword: '',
		agreement: ''
	});

	const activeIndex = ref(-1);

	// 表单验证
	const validateMobile = () => {
		const mobile = formData.value.mobile;
		if (!mobile) {
			errors.value.mobile = '请输入手机号';
			return false;
		}
		if (!/^1[3-9]\d{9}$/.test(mobile)) {
			errors.value.mobile = '手机号格式不正确';
			return false;
		}
		errors.value.mobile = '';
		return true;
	};

	const validatePassword = () => {
		const password = formData.value.password;
		if (!password) {
			errors.value.password = '请输入密码';
			return false;
		}
		if (password.length < 6) {
			errors.value.password = '密码至少6位';
			return false;
		}
		errors.value.password = '';
		return true;
	};

	const validateConfirmPassword = () => {
		if (formData.value.password !== formData.value.confirmPassword) {
			errors.value.confirmPassword = '两次输入密码不一致';
			return false;
		}
		errors.value.confirmPassword = '';
		return true;
	};

	const validateAgreement = () => {
		if (!formData.value.agreed) {
			errors.value.agreement = '请阅读并同意用户协议';
			return false;
		}
		errors.value.agreement = '';
		return true;
	};

	// 计算属性
	const formValid = computed(() => {
		console.log((
			validateMobile() &&
			validatePassword() &&
			validateConfirmPassword() &&
			formData.value.agreed
		))
		return (
			validateMobile() &&
			validatePassword() &&
			validateConfirmPassword() &&
			formData.value.agreed
		);
	});

	// 交互方法
	const handleFocus = (index) => {
		activeIndex.value = index;
	};

	const toggleAgreement = (e) => {
		formData.value.agreed = e.detail.value.length > 0;
		validateAgreement();
	};

	const handleSubmit = () => {
		if (!formValid.value) return;

		uni.showLoading({
			title: '注册中...',
			mask: true
		});
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '注册成功',
				icon: 'success'
			});
			uni.navigateBack();
		}, 1500);
	};

	const showAgreement = () => {
		uni.navigateTo({
			url: '/pages/agreement/agreement'
		});
	};

	const navigateToLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	};
</script>

<style scoped>
	/* 基础样式 */
	.register-container {
		height: 93vh;
		background: linear-gradient(180deg, #fff3e9 0%, #ffffff 100%);
		padding: 60rpx 72rpx;
		box-sizing: border-box;
	}

	/* 品牌标识 */
	.brand-wrapper {
		margin: 0rpx 0 100rpx;
		text-align: center;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 24rpx;
		filter: drop-shadow(0 8rpx 16rpx rgba(237, 130, 2, 0.1));
	}

	.slogan {
		font-size: 36rpx;
		color: #ed8202;
		font-weight: 500;
		letter-spacing: 2rpx;
	}

	/* 输入框样式 */
	.input-wrapper {
		margin-bottom: 72rpx;
		position: relative;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.input-field {
		width: 70vw;
		height: 96rpx;
		padding: 0 72rpx;
		font-size: 34rpx;
		color: #333;
		border-bottom: 2rpx solid #eee;
		position: relative;
		z-index: 1;
	}

	.floating-label {
		position: absolute;
		left: 72rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #999;
		font-size: 34rpx;
		transition: all 0.3s;
		pointer-events: none;
		z-index: 2;
		max-width: calc(100% - 144rpx);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.input-field:focus+.floating-label,
	.input-field:not(:placeholder-shown)+.floating-label {
		transform: translateY(-180%);
		font-size: 28rpx;
		color: #ed8202;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 4rpx;
		background: #ed8202;
		transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.underline.active {
		width: 100%;
	}

	/* 错误提示 */
	.error-tip {
		position: absolute;
		bottom: -48rpx;
		left: 0;
		color: #ff4d4f;
		font-size: 24rpx;
	}

	/* 协议条款 */
	.agreement-wrapper {
		margin: 48rpx 0 64rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.agreement-label {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	.agreement-link {
		color: #ed8202;
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	/* 注册按钮 */
	.submit-btn {
		width: 100%;
		height: 96rpx;
		background: #ffd8b8;
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
		letter-spacing: 4rpx;
		transition: all 0.3s;
		border: none;
	}

	.submit-btn.active {
		background: #ed8202;
		box-shadow: 0 8rpx 24rpx rgba(237, 130, 2, 0.2);
	}

	/* 登录引导 */
	.login-guide {
		margin-top: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.login-link {
		color: #ed8202;
		font-weight: 500;
		margin-left: 16rpx;
	}

	/* 响应式调整 */
	@media (max-width: 375px) {
		.register-container {
			padding: 40rpx 48rpx;
		}

		.brand-wrapper {
			margin: 80rpx 0 60rpx;
		}

		.logo {
			width: 160rpx;
			height: 160rpx;
		}

		.input-field {
			font-size: 30rpx;
			padding: 0 64rpx;
		}

		.floating-label {
			font-size: 30rpx;
			max-width: calc(100% - 128rpx);
		}
	}
</style>